<template>
	<view>
		<DragButton :size="200" :xEdge="10" :yEdge="yEdge" :disTop="88" v-if="isShow&&videoUrl.length!==0">
		    <view class="s_pack" @click="toUrl">
		    	<video :src="videoUrl" autoplay="true" controls="false" loop="true" show-center-play-btn="false" show-play-btn="false" object-fit="cover" :muted="isMute" :show-mute-btn="isMutud" @fullscreenchange="playVideo"></video>
		    	<view class="s_tit">{{masktit}}</view>
				<view class="close" @click.stop="closeSup">
					<image src="/static/close.png" mode="widthFix"></image>
				</view>
				<view class="mask" v-if="isMask"></view>
		    </view>
		</DragButton>
	</view>
</template>

<script>
	import DragButton from '@/components/dragon-dragButton/index.vue'
	export default {
		name:"suspension",
		components: {
			DragButton
		},
		props: {
			'videoUrl': {
				type: String,
				default: ''
			},
			'isMask': {
				type: Boolean,
				default: false
			},
			'goodsid': {
				type: [String,Number],
				default: ''
			},
			'yEdge':{
				type: [String,Number],
				default: 100
			},
			'masktit': {
				type: String,
				default: '视频讲解'
			},
		},
		data() {
			return {
				isShow: true,
				isMutud: false,//是否显示静音按钮
				isMute: true,//是否静音
			};
		},
		methods: {
			playVideo(e){
				console.log(e.detail)
				if(e.detail.fullScreen){//全屏
					this.isMute = false;
					this.isMutud = true;
				}else{//退出全屏
					this.isMute = true;
					this.isMutud = false;
				}
			},
			closeSup(){
				this.isShow = false;
			},
			toUrl(){
				if(this.goodsid!=''){
					uni.navigateTo({
						url: '/pages/product/videoDetail?id='+this.goodsid
					})
				}
			}
		}
	}
</script>

<style lang="scss">
		.s_pack{
			position: relative;
			border-radius: 12rpx;
			overflow: hidden;
			width: 200rpx;
			height: 264rpx;
			border: 4rpx solid #8000E6;
			video{
				width: 100%;
				height: 100%;
			}
			.s_tit{
				position: absolute;
				width: 100%;
				line-height: 34rpx;
				background: rgba(0,0,0,.7);
				bottom: 0;
				left: 0;
				color: #fff;
				text-align: center;
				z-index: 1;
				font-size: 24rpx;
				color: #FFFFFF;
			}
			.close{
				position: absolute;
				width: 30rpx;
				height: 30rpx;
				right: 0;
				top: 0;
				border-bottom-left-radius: 10rpx;
				background: rgba(200,200,200,.7);
				text-align: center;
				z-index: 3;
				image{
					width: 20rpx;
					display: block;
					margin: 6rpx auto;
				}
			}
			.mask{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
		}
</style>